<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { reactive /*  toRaw */ } from 'vue'
import type { UnwrapRef } from 'vue'

interface FormState {
  price: number
  increase?: number
  decrease?: number
  total: number
}

const buyFormState: UnwrapRef<FormState> = reactive({
  price: 100,
  increase: 7,
  total: 20000,
})

const sellFormState: UnwrapRef<FormState> = reactive({
  price: 100,
  decrease: 7,
  total: 20000,
})

let precision = 2
const activeKey = ref('1')
watch(activeKey, tabKey => {
  switch (tabKey) {
    case '1':
      buyFormState.increase = 7
      buyFormState.total = 20000
      precision = 2

      break
    case '2':
      sellFormState.decrease = 7
      sellFormState.total = 20000
      precision = 2
      break
    case '3':
      buyFormState.increase = 2
      buyFormState.total = 5000
      precision = 3
      break
    case '4':
      sellFormState.decrease = 2
      sellFormState.total = 5000
      precision = 3

      break
  }
})

const sellResult = computed(() => {
  const res = buyFormState.price * (1 + buyFormState.increase! / 100)
  return res.toFixed(precision)
})

const sellCount = computed(() => {
  return Math.round(buyFormState.total / Number(sellResult.value))
})

const buyResult = computed(() => {
  const res = sellFormState.price * (1 - sellFormState.decrease! / 100)
  return res.toFixed(precision)
})

const buyCount = computed(() => {
  return Math.round(sellFormState.total / Number(buyResult.value))
})

const selectInputText = (event: FocusEvent) => {
  const elem = event.target as HTMLInputElement
  elem.select()
}
</script>

<template>
  <a-tabs v-model:activeKey="activeKey" class="card">
    <a-tab-pane key="1" tab="B">
      <a-form :model="buyFormState" :label-col="{ style: { width: '150px' } }" :wrapper-col="{ span: 14 }">
        <a-form-item label="依据">
          <a-input v-model:value="buyFormState.price" @focus="selectInputText" />
        </a-form-item>
        <a-form-item label="幅度">
          <a-row>
            <a-col :span="12">
              <a-slider v-model:value="buyFormState.increase" :min="1" :max="20" />
            </a-col>
            <a-col :span="4">
              <a-input-number v-model:value="buyFormState.increase" :min="1" :max="20" style="margin-left: 16px" />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="计划">
          <a-row>
            <a-col :span="12">
              <a-slider v-model:value="buyFormState.total" :min="3000" :max="60000" :step="1000" />
            </a-col>
            <a-col :span="4">
              <a-input-number
                v-model:value="buyFormState.total"
                :min="3000"
                :max="60000"
                :step="10000"
                style="margin-left: 16px"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <hr />
        <br />
        <a-form-item label="目标">
          <a-input v-model:value="sellResult" disabled />
        </a-form-item>
        <a-form-item label="数量">
          <a-input v-model:value="sellCount" disabled />
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="2" tab="S">
      <a-form :model="sellFormState" :label-col="{ style: { width: '150px' } }" :wrapper-col="{ span: 14 }">
        <a-form-item label="依据">
          <a-input v-model:value="sellFormState.price" @focus="selectInputText" />
        </a-form-item>
        <a-form-item label="幅度">
          <a-row>
            <a-col :span="12">
              <a-slider v-model:value="sellFormState.decrease" :min="1" :max="20" />
            </a-col>
            <a-col :span="4">
              <a-input-number v-model:value="sellFormState.decrease" :min="1" :max="20" style="margin-left: 16px" />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="计划">
          <a-row>
            <a-col :span="12">
              <a-slider v-model:value="sellFormState.total" :min="3000" :max="60000" :step="1000" />
            </a-col>
            <a-col :span="4">
              <a-input-number
                v-model:value="sellFormState.total"
                :min="3000"
                :max="60000"
                style="margin-left: 16px"
                :step="10000"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <hr />
        <br />
        <a-form-item label="目标">
          <a-input v-model:value="buyResult" disabled />
        </a-form-item>
        <a-form-item label="数量">
          <a-input v-model:value="buyCount" disabled />
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="3" tab="EB">
      <a-form :model="buyFormState" :label-col="{ style: { width: '150px' } }" :wrapper-col="{ span: 14 }">
        <a-form-item label="依据">
          <a-input v-model:value="buyFormState.price" @focus="selectInputText" />
        </a-form-item>
        <a-form-item label="幅度">
          <a-row>
            <a-col :span="12">
              <a-slider v-model:value="buyFormState.increase" :min="1" :max="20" />
            </a-col>
            <a-col :span="4">
              <a-input-number v-model:value="buyFormState.increase" :min="1" :max="20" style="margin-left: 16px" />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="计划">
          <a-row>
            <a-col :span="12">
              <a-slider v-model:value="buyFormState.total" :min="3000" :max="60000" :step="1000" />
            </a-col>
            <a-col :span="4">
              <a-input-number
                v-model:value="buyFormState.total"
                :min="3000"
                :max="60000"
                :step="10000"
                style="margin-left: 16px"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <hr />
        <br />
        <a-form-item label="目标">
          <a-input v-model:value="sellResult" disabled />
        </a-form-item>
        <a-form-item label="数量">
          <a-input v-model:value="sellCount" disabled />
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="4" tab="ES">
      <a-form :model="sellFormState" :label-col="{ style: { width: '150px' } }" :wrapper-col="{ span: 14 }">
        <a-form-item label="依据">
          <a-input v-model:value="sellFormState.price" @focus="selectInputText" />
        </a-form-item>
        <a-form-item label="幅度">
          <a-row>
            <a-col :span="12">
              <a-slider v-model:value="sellFormState.decrease" :min="1" :max="20" />
            </a-col>
            <a-col :span="4">
              <a-input-number v-model:value="sellFormState.decrease" :min="1" :max="20" style="margin-left: 16px" />
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="计划">
          <a-row>
            <a-col :span="12">
              <a-slider v-model:value="sellFormState.total" :min="3000" :max="60000" :step="1000" />
            </a-col>
            <a-col :span="4">
              <a-input-number
                v-model:value="sellFormState.total"
                :min="3000"
                :max="60000"
                style="margin-left: 16px"
                :step="10000"
              />
            </a-col>
          </a-row>
        </a-form-item>
        <hr />
        <br />
        <a-form-item label="目标">
          <a-input v-model:value="buyResult" disabled />
        </a-form-item>
        <a-form-item label="数量">
          <a-input v-model:value="buyCount" disabled />
        </a-form-item>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<style scoped>
.card {
  padding: 20px;
}
</style>
